<template>
    <div class="teach-list">
        <div class="teach-cont" v-for="(item,index) in teachList" :key="index">
            <a href="javascript:;">
                <div class="cover">
                    <img :src="item.head" alt="">
                </div>
                <div class="teach-right">
                    <h3 class="name">{{ item.name }}</h3>
                    <p class="desc">{{ item.desc }}</p>
                    <div class="order">
                        {{ item.count_subscribe }}
                        <span>订阅</span>
                    </div>
                </div>
            </a>
        </div>
    </div>
</template>

<script>
export default {
    props: ['teachList'],
}
</script>

<style>
.teach-list {
    width: 6.78rem;
}
.teach-list .teach-cont {
    width: 100%;
    padding-top: 0.31rem;
    padding-bottom: 0.31rem;
    border-bottom: 1px solid rgba(240,242,245,1);
}
.teach-list .teach-cont a {
    display: flex;
    width: 100%;
}
.teach-list .teach-cont a .cover {
    width: 1.6rem;
    height: 1.6rem;
}
.teach-list .teach-cont a .cover img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.teach-list .teach-cont a .teach-right {
    flex: 1;
    margin-left: 0.24rem;
}
.teach-list .teach-cont a .teach-right h3 {
    font-size: 0.36rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height: 0.5rem;
}
.teach-list .teach-cont a .teach-right .desc {
    width: 5rem;
    font-size: 0.26rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(176,176,185,1);
    line-height: 0.37rem;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;

}
.teach-list .teach-cont a .teach-right .order {
    font-size: 0.26rem;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(51,51,51,1);
    line-height: 0.37rem;
}
.teach-list .teach-cont a .teach-right .order span {
    color: rgba(176,176,185,1);
}
</style>

